<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学海书舫图书馆管理后台</title>
    <link rel="Shortcut Icon" href="./favicon.ico">
    <!--    引入相关样式和js（照抄）-->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/background.css">
    <script src="./js/Vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
</head>

<body>
    <!--    确定容器，所有代码都要在这个容器内写，id名任意-->
    <div id="main">
        <el-container>
            <el-header
                style="height: 5em; text-align: right; font-size: 12px; background-color: #545c64; color: #FFFFFF; line-height: 5em">
                <span class="caption">&nbsp;&nbsp;&nbsp;&nbsp;学海书舫图书馆管理后台</span>
                <el-link @click="logout" type="primary" :underline="false"
                    icon="el-icon-user">{{this.loginUser}}，欢迎您</el-link>
            </el-header>
        </el-container>

        <el-container style="height: 53em">
            <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '2','2-1', '2-2', '3', '3-1', '3-2']" background-color="#545c64"
                    text-color="#fff" active-text-color="#ffd04b" :default-active="changeActive" @select="changeOption">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-reading"></i>书籍管理</template>
                        <el-menu-item index="changeInsertBook">添加书籍</el-menu-item>
                        <el-menu-item index="changeBookList">书籍列表</el-menu-item>
                        <el-menu-item index="changeBorrowInfoList">借书列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-user"></i>人员管理</template>
                        <el-submenu index="2-1">
                            <template slot="title">读者管理</template>
                            <el-menu-item index="changeInsertReader">添加读者</el-menu-item>
                            <el-menu-item index="changeReaderManageList">读者信息</el-menu-item>
                            <el-menu-item index="changeBorrowInfoByReaderList">借书列表</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2-2">
                            <template slot="title">管理员管理</template>
                            <el-menu-item index="changeInsertAdministrator">添加管理员</el-menu-item>
                            <el-menu-item index="changeAdministratorList">管理员列表</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-message"></i>消息管理</template>
                        <el-submenu index="3-1">
                            <template slot="title">公告管理</template>
                            <el-menu-item index="changeInsertAnnouncement">添加公告</el-menu-item>
                            <el-menu-item index="changeAnnouncementList">公告列表</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="changeMessageList">留言列表</el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <!--添加书籍-->
                <el-dialog :visible.sync="addBookFormPopUp" width="24%" :before-close="handleClose">
                    <el-form ref="form" :model="bookForm" label-width="80px">
                        <el-form-item label="ISBN">
                            <el-input v-model="bookForm.iSBN" placeholder="7-307-03414-X"></el-input>
                        </el-form-item>
                        <el-form-item label="书名">
                            <el-input v-model="bookForm.bookName" placeholder="西游记"></el-input>
                        </el-form-item>
                        <el-form-item label="出版社">
                            <el-input v-model="bookForm.bookPublish" placeholder="武汉大学出版社"></el-input>
                        </el-form-item>
                        <el-form-item label="作者">
                            <el-input v-model="bookForm.bookAuthor" placeholder="吴承恩(明)"></el-input>
                        </el-form-item>
                        <el-form-item label="价格">
                            <el-input v-model="bookForm.bookPrice" placeholder="32.20"></el-input>
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-select v-model="bookForm.bookType" filterable allow-create default-first-option
                                placeholder="请选择或输入类型">
                                <el-option v-for="item in bookTypes" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="位置">
                            <el-cascader v-model="bookForm.bookLocationArray" :options="bookLocations"
                                :props="{ expandTrigger: 'hover' }"></el-cascader>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addBook('determine')">入库</el-button>
                            <el-button @click="addBook('cancel')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!-- 书籍列表 -->
                <div id="changeBookList" style="display: block">
                    <!-- 搜索表单 -->
                    <el-dialog :visible.sync="searchBook" width="24%" :before-close="handleClose">
                        <el-form ref="form" :model="bookForm" label-width="70px">
                            <el-form-item label="书名">
                                <el-input v-model="bookForm.bookName" placeholder="西游记"></el-input>
                            </el-form-item>
                            <el-form-item label="作者">
                                <el-input v-model="bookForm.bookAuthor" placeholder="吴承恩"></el-input>
                            </el-form-item>
                            <el-form-item label="出版社">
                                <el-input v-model="bookForm.bookPublish" placeholder="人民文学出版社"></el-input>
                            </el-form-item>
                            <el-form-item label="ISBN">
                                <el-input v-model="bookForm.iSBN" placeholder="978-7-0201-6346-5"></el-input>
                            </el-form-item>
                            <el-form-item label="位置">
                                <el-cascader v-model="bookForm.bookLocationArray" :options="bookLocations"
                                    :props="{ checkStrictly: true }"></el-cascader>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-select v-model="bookForm.bookType" filterable default-first-option
                                    placeholder="请选择类型">
                                    <el-option v-for="item in bookTypes" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="bookForm.bookState">
                                    <el-option label="遗失" value="-11"></el-option>
                                    <el-option label="在馆" value="11"></el-option>
                                    <el-option label="借出" value="10"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchBooks('determine')">查询</el-button>
                                <el-button @click="searchBooks('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <template>
                        <el-button type="danger" plain @click="deleteBookByIds"
                            :disabled="this.MultipleSelection.length === 0 ? true: false"
                            icon="el-icon-delete">删除所选</el-button>
                        <el-button type="primary" plain @click="searchBook = true"
                            icon="el-icon-search">搜索书籍</el-button>
                    </template>

                    <!--修改书籍-->
                    <el-dialog :visible.sync="reviseBookFormPopUp" width="24%" :before-close="handleClose">
                        <el-form ref="form" :model="bookForm" label-width="80px">
                            <el-form-item label="ISBN">
                                <el-input v-model="bookForm.iSBN" placeholder="7-307-03414-X"></el-input>
                            </el-form-item>
                            <el-form-item label="书名">
                                <el-input v-model="bookForm.bookName" placeholder="西游记"></el-input>
                            </el-form-item>
                            <el-form-item label="出版社">
                                <el-input v-model="bookForm.bookPublish" placeholder="武汉大学出版社"></el-input>
                            </el-form-item>
                            <el-form-item label="作者">
                                <el-input v-model="bookForm.bookAuthor" placeholder="吴承恩(明)"></el-input>
                            </el-form-item>
                            <el-form-item label="价格">
                                <el-input v-model="bookForm.bookPrice" placeholder="32.20"></el-input>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-select v-model="bookForm.bookType" filterable allow-create default-first-option
                                    placeholder="请选择或输入类型">
                                    <el-option v-for="item in bookTypes" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="位置">
                                <el-cascader v-model="bookForm.bookLocationArray" :options="bookLocations"
                                    :props="{ expandTrigger: 'hover' }"></el-cascader>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch v-model="bookStateValue" active-color="#13ce66" inactive-color="#ff4949"
                                    active-text="在馆" inactive-text="遗失">
                                </el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reviseBook('determine')">确定</el-button>
                                <el-button @click="reviseBook('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="50.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="编号">
                                        <span>{{ props.row.bookId }}</span>
                                    </el-form-item>
                                    <el-form-item label="ISBN">
                                        <span>{{ props.row.iSBN }}</span>
                                    </el-form-item>
                                    <el-form-item label="书名">
                                        <span>{{ props.row.bookName }}</span>
                                    </el-form-item>
                                    <el-form-item label="作者">
                                        <span>{{ props.row.bookAuthor }}</span>
                                    </el-form-item>
                                    <el-form-item label="出版社">
                                        <span>{{ props.row.bookPublish }}</span>
                                    </el-form-item>
                                    <el-form-item label="价格">
                                        <span>{{ props.row.bookPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="类型">
                                        <span>{{ props.row.bookType }}</span>
                                    </el-form-item>
                                    <el-form-item label="位置">
                                        <span>{{ props.row.bookLocation }}</span>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <span>{{ props.row.bookStateStr }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="bookId" label="编号" align="center">
                        </el-table-column>
                        <el-table-column prop="bookName" label="书名" align="center">
                        </el-table-column>
                        <el-table-column prop="bookAuthor" label="作者" align="center">
                        </el-table-column>
                        <el-table-column prop="bookPublish" label="出版社" align="center">
                        </el-table-column>
                        <el-table-column prop="bookStateStr" label="状态" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="222">
                            <template slot-scope="scope">
                                <el-button @click="bookRevise(scope.row)"
                                    :disabled="scope.row.bookState === 10 ? true : false"
                                    icon="el-icon-edit">修改</el-button>
                                <el-button type="danger" plain @click="deleteBookById(scope.row.bookId)"
                                    :disabled="scope.row.bookState === 10 ? true : false"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>


                    </el-table>

                    <!--分页工具条-->
                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBookList')"
                            @current-change="changeCurrentPage($event, 'changeBookList')" :current-page="currentPage"
                            :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>
                <!-- 借书列表（书籍管理） -->
                <div id="changeBorrowInfoList" style="display: none">
                    <template>
                        <el-button type="danger" plain @click="lostBooks"
                            :disabled="this.MultipleSelection.length === 0? true: false"
                            icon="el-icon-delete">挂失所选</el-button>
                        <span style="display: inline-block; margin-left: 3px"></span>
                        <el-form :inline="true" :model="borrowInfoForm" class="demo-form-inline"
                            style="display: inline;">
                            <el-form-item label="书籍编号">
                                <el-input v-model="borrowInfoForm.bookId" placeholder="1"></el-input>
                            </el-form-item>
                            <el-form-item label="书籍名称">
                                <el-input v-model="borrowInfoForm.bookName" placeholder="西游记"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchBorrowInfoByBook"
                                    icon="el-icon-search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="bookId" label="书籍编号" align="center" width="110">
                        </el-table-column>
                        <el-table-column prop="bookName" label="书籍名称" align="center">
                        </el-table-column>
                        <el-table-column prop="readerId" label="读者编号" align="center" width="110">
                        </el-table-column>
                        <el-table-column prop="readerName" label="读者姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="borrowTime, returnTime" label="时间" align="center">
                            <template slot-scope="scope">
                                {{scope.row.borrowedTime}} ~ {{scope.row.returnTime}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="arrears" label="欠费" align="center" width="75">
                            <template slot-scope="scope">
                                {{scope.row.arrears}} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type=" danger" plain @click="lostBook(scope.row.bookId)"
                                    icon="el-icon-delete">挂失</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBorrowPageSize')"
                            @current-change="changeCurrentPage($event, 'changeBorrowInfoList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>


                <!--添加读者-->
                <el-dialog :visible.sync="addReaderFormPopUp" width="24%" :before-close="handleClose">
                    <el-form ref="form" :model="readerForm" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="readerForm.readerName"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="readerForm.readerSex" filterable default-first-option
                                placeholder="请选择性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="readerForm.readerPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="readerForm.readerEmail"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="readerForm.readerPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addReader('determine')">注册</el-button>
                            <el-button @click="addReader('cancel')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <!-- 读者列表 -->
                <div id="changeReaderManageList" style="display: none">
                    <!-- 搜索表单 -->
                    <el-dialog :visible.sync="searchReader" width="24%" :before-close="handleClose">
                        <el-form ref="form" :model="readerForm" label-width="70px">
                            <el-form-item label="用户名">
                                <el-input v-model="readerForm.readerName" placeholder="张三"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="readerForm.readerSex" filterable default-first-option
                                    placeholder="请选择性别">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="readerForm.readerEmail" placeholder="zhangsan@163.com"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="readerForm.readerPhone" placeholder="19856448731"></el-input>
                            </el-form-item>
                            <el-form-item label="总欠费">
                                <el-input v-model="readerForm.readerArrears" placeholder="非负数"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="readerForm.readerState">
                                    <el-option label="挂失" value="0"></el-option>
                                    <el-option label="正常" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchReaders('determine')">查询</el-button>
                                <el-button @click="searchReaders('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <template>
                        <el-button type="danger" plain @click="deleteReaderByIds"
                            :disabled="this.MultipleSelection.length === 0 ? true: false"
                            icon="el-icon-delete">删除所选</el-button>
                        <el-button type="primary" plain @click="searchReader = true"
                            icon="el-icon-search">搜索读者</el-button>
                    </template>

                    <!--修改读者-->
                    <el-dialog :visible.sync="reviseReaderFormPopUp" width="24%" :before-close="handleClose">
                        <el-form ref="form" :model="readerForm" label-width="70px">
                            <el-form-item label="编号">
                                <el-input v-model="readerForm.readerId" placeholder="1"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="readerForm.readerName" placeholder="张三"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="readerForm.readerSex" filterable default-first-option
                                    placeholder="请选择性别">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="readerForm.readerEmail" placeholder="zhangsan@163.com"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="readerForm.readerPhone" placeholder="19856448731"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch v-model="readerStateValue" active-color="#13ce66" inactive-color="#ff4949"
                                    active-text="正常" inactive-text="挂失">
                                </el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reviseReader('determine')">修改</el-button>
                                <el-button @click="reviseReader('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="50.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="编号">
                                        <span>{{ props.row.readerId }}</span>
                                    </el-form-item>
                                    <el-form-item label="用户名">
                                        <span>{{ props.row.readerName }}</span>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <span>{{ props.row.readerSex }}</span>
                                    </el-form-item>
                                    <el-form-item label="邮箱">
                                        <span>{{ props.row.readerEmail }}</span>
                                    </el-form-item>
                                    <el-form-item label="电话">
                                        <span>{{ props.row.readerPhone }}</span>
                                    </el-form-item>
                                    <el-form-item label="总欠费">
                                        <span>{{ props.row.readerArrears }}</span>
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <span>{{ props.row.readerPassword }}</span>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <span>{{ props.row.readerStateStr }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="readerId" label="编号" align="center">
                        </el-table-column>
                        <el-table-column prop="readerName" label="用户名" align="center">
                        </el-table-column>
                        <el-table-column prop="readerSex" label="性别" align="center">
                        </el-table-column>
                        <el-table-column prop="readerArrears" label="总欠费" align="center">
                            <template slot-scope="scope">
                                {{scope.row.readerArrears}} 元
                            </template>
                        </el-table-column>
                        <el-table-column prop="readerStateStr" label="状态" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="222">
                            <template slot-scope="scope">
                                <el-button @click="readerRevise(scope.row)" icon="el-icon-edit">修改</el-button>
                                <el-button type="danger" plain @click="deleteReaderById(scope.row.readerId)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页工具条-->
                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeReaderManageList')"
                            @current-change="changeCurrentPage($event, 'changeReaderManageList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>

                <!-- 借书查询（人员管理） -->
                <div id="changeBorrowInfoByReaderList" style="display: none">
                    <template>
                        <el-button type="danger" plain @click="returnBooks"
                            :disabled="this.MultipleSelection.length === 0? true: false"
                            icon="el-icon-delete">归还所选</el-button>
                        <span style="display: inline-block; margin-left: 3px"></span>
                        <el-form :inline="true" :model="borrowInfoForm" class="demo-form-inline"
                            style="display: inline;">
                            <el-form-item label="读者编号">
                                <el-input v-model="borrowInfoForm.readerId" placeholder="1"></el-input>
                            </el-form-item>
                            <el-form-item label="读者姓名">
                                <el-input v-model="borrowInfoForm.readerName" placeholder="张三"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchBorrowInfoByBook"
                                    :disabled="this.borrowInfoForm.readerId === '' && this.borrowInfoForm.readerName === '' ? true : false"
                                    icon="el-icon-search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="bookId" label="书籍编号" align="center" width="110">
                        </el-table-column>
                        <el-table-column prop="bookName" label="书籍名称" align="center">
                        </el-table-column>
                        <el-table-column prop="readerId" label="读者编号" align="center" width="110">
                        </el-table-column>
                        <el-table-column prop="readerName" label="读者姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="borrowTime, returnTime" label="时间" align="center">
                            <template slot-scope="scope">
                                {{scope.row.borrowedTime}} ~ {{scope.row.returnTime}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="arrears" label="欠费" align="center" width="75">
                            <template slot-scope="scope">
                                {{scope.row.arrears}} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type=" danger" plain @click="returnBook(scope.row.bookId, scope.row.arrears)"
                                    icon="el-icon-delete">归还</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBorrowPageSize')"
                            @current-change="changeCurrentPage($event, 'changeBorrowInfoList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>


                <!--添加管理-->
                <el-dialog :visible.sync="addAdminFormPopUp" width="24%" :before-close="handleClose">
                    <el-form ref="form" :model="adminForm" label-width="70px">
                        <el-form-item label="用户名">
                            <el-input v-model="adminForm.adminName" placeholder="admin"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="adminForm.adminEmail" placeholder="admin@163.com"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="adminForm.adminPhone" placeholder="19856448731"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="adminForm.adminPassword" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addAdmin('determine')">添加</el-button>
                            <el-button @click="addAdmin('cancel')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <!-- 管理员信息列表 -->
                <div id="changeAdministratorList" style="display: none">
                    <!-- 搜索表单 -->
                    <el-dialog :visible.sync="searchAdmin" width="24%" :before-close="handleClose">
                        <el-form ref="form" :model="adminForm" label-width="70px">
                            <el-form-item label="编号">
                                <el-input v-model="adminForm.adminId" placeholder="admin"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="adminForm.adminName" placeholder="admin"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="adminForm.adminEmail" placeholder="admin@163.com"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="adminForm.adminPhone" placeholder="19856448731"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-select v-model="adminForm.adminState">
                                    <el-option label="禁用" value="0"></el-option>
                                    <el-option label="启用" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchAdmins('determine')">查询</el-button>
                                <el-button @click="searchAdmins('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <template>
                        <el-button type="danger" plain @click="deleteAdminByIds"
                            :disabled="this.MultipleSelection.length != 0 && this.loginUser === 'admin' ? false: true"
                            icon="el-icon-delete">删除所选</el-button>
                        <el-button type="primary" plain @click="searchAdmin = true"
                            icon="el-icon-search">搜索管理</el-button>
                    </template>

                    <!--修改管理员-->
                    <el-dialog :visible.sync="reviseAdminFormPopUp" width="24%" :before-close="handleClose">
                        <el-form ref="form" :model="adminForm" label-width="70px">
                            <el-form-item label="用户名">
                                <el-input v-model="adminForm.adminName" placeholder="admin"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="adminForm.adminEmail" placeholder="admin@163.com"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="adminForm.adminPhone" placeholder="19856448731"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="adminForm.adminPhone" placeholder="19856448731"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="adminForm.adminPassword" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch v-model="adminStateValue" active-color="#13ce66" inactive-color="#ff4949"
                                    active-text="启用" inactive-text="禁用">
                                </el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reviseAdmin('determine')">修改</el-button>
                                <el-button @click="reviseAdmin('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="adminId" label="编号" align="center">
                        </el-table-column>
                        <el-table-column prop="adminName" label="用户名" align="center">
                        </el-table-column>
                        <el-table-column prop="adminPhone" label="电话" align="center">
                        </el-table-column>
                        <el-table-column prop="adminEmail" label="邮箱" align="center">
                        </el-table-column>
                        <el-table-column prop="adminPassword" label="密码" align="center">
                        </el-table-column>
                        <el-table-column prop="adminStateStr" label="状态" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="222">
                            <template slot-scope="scope">
                                <el-button @click="adminRevise(scope.row)" icon="el-icon-edit"
                                    :disabled="!isDisabled(scope.row.adminName)">修改</el-button>
                                <el-button type="danger" plain @click="deleteAdminById(scope.row.adminId)"
                                    :disabled="!isDisabled(scope.row.adminName)" icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页工具条-->
                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeAdminManageList')"
                            @current-change="changeCurrentPage($event, 'changeAdminManageList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>


                <!-- 添加公告 -->
                <div id="changeInsertAnnouncement" style="display: none">
                    <el-form :model="announcementForm" class="demo-form-inline">
                        <el-form-item>
                            <el-button type="primary" @click="addAnnouncement('determine')">添加</el-button>
                        </el-form-item>
                        <el-form-item label="公告标题">
                            <el-input v-model="announcementForm.announcementTitle" placeholder="入馆需知"></el-input>
                        </el-form-item>
                        <el-form-item label="公告内容">
                            <el-input type="textarea" :rows="25" v-model="announcementForm.announcementContent"
                                placeholder="国家图书馆由位于文津街的古籍馆和位于白石桥的总馆南区、总馆北区构成，形成三位一体的馆舍布局。古籍馆主要提供普通古籍、外文善本、地方志家谱文献服务和临时主题展览服务；总馆南区提供外文文献、中外文专藏文献的专业性服务和国家典籍博物馆展陈服务；总馆北区提供以中文普通文献借阅、电子文献、音视频资源服务和少年儿童服务为主的大众服务。
1.本馆开架借阅区面向年满13周岁读者开放，13至15周岁读者入内须凭国家图书馆读者卡，其他读者凭国家图书馆读者卡或第二代居民身份证入内。

2.本馆闭架借阅区面向年满16周岁并持有国家图书馆读者卡的读者开放。

3.少年儿童馆接待15周岁及以下少年儿童。学龄前儿童须有监护人陪同，陪同监护人凭有效证件入内。

4.馆区内设有存包柜，随身携带的书包及其他物品可免费寄存，贵重物品请随身携带。

5.请勿携带个人书、刊、报进入阅览区自习。

6.请勿在馆区内从事与国家图书馆所提供服务无关的活动。

7.请在指定区域就餐、饮水，勿携带食品、有色和含糖饮料进入阅览区域。

8.禁止在馆区内吸烟和使用明火,入馆须按规定接受安检，禁止携带易燃、易爆、有毒等危险品。

9.请注意仪表着装，衣冠整洁得体，言谈举止文明。

10.请遵守公共秩序和国家图书馆相关管理规定，服从工作人员管理，自觉维护参观秩序和良好的阅读环境。"></el-input>
                        </el-form-item>
                    </el-form>
                    </el-dialog>
                </div>
                <!-- 公告列表 -->
                <div id="changeAnnouncementList" style="display: none">
                    <template>
                        <el-button type="danger" plain @click="deleteAnnouncementByAnnouncementIds"
                            :disabled="this.MultipleSelection.length != 0 ? false: true"
                            icon="el-icon-delete">删除所选</el-button>
                        <span style="display: inline-block; margin-left: 3px"></span>
                        <el-form :inline="true" :model="announcementForm" class="demo-form-inline"
                            style="display: inline;">
                            <el-form-item label="公告标题">
                                <el-input v-model="announcementForm.announcementTitle" placeholder="入馆需知"></el-input>
                            </el-form-item>
                            <el-form-item label="公告内容">
                                <el-input v-model="announcementForm.announcementContent"
                                    placeholder="国家图书馆由位于文津..."></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchBorrowInfoByBook"
                                    icon="el-icon-search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </template>

                    <!--修改公告-->
                    <el-dialog :visible.sync="reviseAnnouncementFormPopUp" width="55%" :before-close="handleClose">
                        <el-form :model="announcementForm" class="demo-form-inline">
                            <el-form-item label="公告标题">
                                <el-input v-model="announcementForm.announcementTitle" placeholder="入馆需知"></el-input>
                            </el-form-item>
                            <el-form-item label="公告内容">
                                <el-input type="textarea" rows="10" v-model="announcementForm.announcementContent"
                                    placeholder="国家图书馆由位于文津街的古籍馆和位于白石桥的总馆南区、总馆北区构成，形成三位一体的馆舍布局。古籍馆主要提供普通古籍、外文善本、地方志家谱文献服务和临时主题展览服务；总馆南区提供外文文献、中外文专藏文献的专业性服务和国家典籍博物馆展陈服务；总馆北区提供以中文普通文献借阅、电子文献、音视频资源服务和少年儿童服务为主的大众服务。

1.本馆开架借阅区面向年满13周岁读者开放，13至15周岁读者入内须凭国家图书馆读者卡，其他读者凭国家图书馆读者卡或第二代居民身份证入内。

2.本馆闭架借阅区面向年满16周岁并持有国家图书馆读者卡的读者开放。

3.少年儿童馆接待15周岁及以下少年儿童。学龄前儿童须有监护人陪同，陪同监护人凭有效证件入内。

4.馆区内设有存包柜，随身携带的书包及其他物品可免费寄存，贵重物品请随身携带。

5.请勿携带个人书、刊、报进入阅览区自习。

6.请勿在馆区内从事与国家图书馆所提供服务无关的活动。

7.请在指定区域就餐、饮水，勿携带食品、有色和含糖饮料进入阅览区域。

8.禁止在馆区内吸烟和使用明火,入馆须按规定接受安检，禁止携带易燃、易爆、有毒等危险品。

9.请注意仪表着装，衣冠整洁得体，言谈举止文明。

10.请遵守公共秩序和国家图书馆相关管理规定，服从工作人员管理，自觉维护参观秩序和良好的阅读环境。"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reviseAnnouncement('determine')">修改</el-button>
                                <el-button @click="reviseAnnouncement('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="公告内容">
                                        <span>{{ props.row.announcementContent}}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="announcementTitle" label="公告标题" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="announcementContent" label="公告内容" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="222">
                            <template slot-scope="scope">
                                <el-button @click="announcementRevise(scope.row)" icon="el-icon-edit">修改</el-button>
                                <el-button type="danger" plain
                                    @click="deleteAnnouncementByAnnouncementId(scope.row.announcementId)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页工具条-->
                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeAdminManageList')"
                            @current-change="changeCurrentPage($event, 'changeAdminManageList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>
                <!-- 消息列表 -->
                <div id="changeMessageList" style="display: none">
                    <template>
                        <el-form :inline="true" :model="messageForm" class="demo-form-inline" style="display: inline;">
                            <el-form-item>
                                <el-input v-model="messageForm.readerId" placeholder="读者编号"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="messageForm.readerName" placeholder="读者姓名"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="messageForm.messageTitle" placeholder="消息标题"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="messageForm.messageContent" placeholder="消息内容"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="messageForm.messageState" placeholder="请选择消息状态">
                                    <el-option label="未读" value="0"></el-option>
                                    <el-option label="已回" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchMessageByMessageId"
                                    icon="el-icon-search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示表格 -->
                    <el-table v-loading="tableLoading" :data="tableData" :row-class-name="tableRowClassName"
                        height="49.6em" @selection-change="handleSelectionChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="消息内容">
                                        <span>{{ props.row.messageContent }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column prop="messageId" label="消息编号" align="center"">
                        </el-table-column>
                        <el-table-column prop=" readerId" label="读者编号" align="center">
                        </el-table-column>
                        <el-table-column prop="readerName" label="读者姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="messageTitle" label="消息标题" align="center">
                        </el-table-column>
                        <el-table-column prop="messageStateStr" label="状态" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="222">
                            <template slot-scope="scope">
                                <el-button type=" danger" plain @click="messageReturn(scope.row)"
                                    icon="el-icon-edit">回复</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-dialog :visible.sync="returnMessageFormPopUp" width="55%" :before-close="handleClose">
                        <el-form :model="messageForm" class="demo-form-inline">
                            <el-form-item label="留言标题">
                                <el-input v-model="messageForm.messageTitle" placeholder="入馆需知" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="留言内容">
                                <el-input type="textarea" rows="5" v-model="messageForm.messageContent"
                                    disabled></el-input>
                            </el-form-item>
                            <el-form-item label="回复内容">
                                <el-input type="textarea" rows="5" v-model="messageForm.messageReturn"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="returnMessage('determine')">修改</el-button>
                                <el-button @click="returnMessage('cancel')">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <div style="margin-top: 1em">
                        <el-pagination @size-change="changePageSize($event, 'changeBorrowPageSize')"
                            @current-change="changeCurrentPage($event, 'changeBorrowInfoList')"
                            :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalData">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>

    </div>
</body>
<script>
    new Vue({
        el: "#main",
        mounted() {
            this.getUserName()
            this.selectBookByPageAndTerms()
            this.selectAllBookType()
        },
        methods: {
            // 登出用户
            logout() {
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("http://localhost:9090/BookManage/login/logoutAdmin").then(resp => {
                        location.reload();
                    })
                })
            },
            // 获取登录用户
            getUserName() {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/admin/getUserNme'
                }).then(resp => {
                    console.log(resp.data)
                    this.loginUser = resp.data
                })
            },

            // 切换选项的函数
            changeOption(key, keyPath) {
                this.currentPage = 1;
                this.pageSize = 10;
                this.tableData = [];
                this.navigations.forEach(element => {
                    let elementById = document.getElementById(element);
                    elementById.style.display = "none"
                });
                this.changeActive = key;

                key === "changeInsertBook" ? this.addBookFormPopUp = true : key === "changeInsertReader" ? this.addReaderFormPopUp = true : key === "changeInsertAdministrator" ? this.addAdminFormPopUp = true : document.getElementById(key).style.display = "block";

                if (key === 'changeBookList') {
                    this.selectBookByPageAndTerms()
                } else if (key === 'changeBorrowInfoList') {
                    this.selectBorrowInfoByPageAndBookTerms()
                } else if (key === 'changeReaderManageList') {
                    this.selectReaderByPageAndTerms()
                } else if (key === 'changeAdministratorList') {
                    this.selectAdminByPageAndTerms()
                } else if (key === 'changeAnnouncementList') {
                    this.announcementForm = { announcementTitle: "", announcementContent: "" };
                    this.selectAnnouncementByPageAndTerms()
                } else if (key === 'changeMessageList') {
                    this.selectMessageByPageANdTerms()
                }
            },

            // 书籍弹窗的确认关闭弹窗
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                        this.messageForm = { messageId: null, readerId: null, messageTitle: "", messageContent: "", messageState: null, readerName: "", messageReturn: "", messageReturnState: null }
                        this.announcementForm = { announcementId: null, announcementTitle: "", announcementContent: "" }
                        this.adminForm = { adminId: null, adminName: "", adminPhone: "", adminPassword: "", adminState: "", adminEmail: "" }
                        this.readerForm = { readerId: null, readerName: "", readerSex: "", readerPhone: "", readerPassword: "", readerArrears: "", readerState: "", readerEmail: "" }
                        this.borrowInfoForm = { bookId: null, bookName: "", readerId: "", readerName: "", borrowedTime: "", returnTime: "", arrears: null }
                        this.bookForm = { bookId: null, bookAuthor: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" }
                    })
                    .catch(_ => {
                    });
            },

            // 获取多选选项的列表
            handleSelectionChange(val) {
                this.MultipleSelection = val;
            },

            // 每页显示条数变换时获取新的条数并重新查询
            changePageSize(val, key) {
                this.pageSize = val;
                key === 'changeBookList' ? this.selectBookByPageAndTerms() : key === 'changeReaderManageList' ? this.selectReaderByPageAndTerms() : key === 'changeBorrowInfoList' ? this : key === 'changeAdministratorList' ? this.selectAdminByPageAndTerms() : key === 'changeAnnouncementList' ? this.selectAnnouncementByPageAndTerms() : key === 'changeMessageList' ? this.selectMessageByPageANdTerms() : null;
            },

            // 页码变换时获取新的页码并重新查询
            changeCurrentPage(val, key) {
                this.currentPage = val
                key === 'changeBookList' ? this.selectBookByPageAndTerms() : key === 'changeReaderManageList' ? this.selectReaderByPageAndTerms() : key === 'changeBorrowInfoList' ? this : key === 'changeAdministratorList' ? this.selectAdminByPageAndTerms() : key === 'changeAnnouncementList' ? this.selectAnnouncementByPageAndTerms() : key === 'changeMessageList' ? this.selectMessageByPageANdTerms() : null;
            },

            // 表格每行颜色样式
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },


            /**
             * 书籍管理
             * */
            // 添加书籍，将书籍写入数据库
            addBook(key) {
                this.addBookFormPopUp = false;
                if (key === 'determine') {
                    axios({
                        method: "post",
                        url: "http://localhost:9090/BookManage/book/insertBook",
                        data: this.bookForm,
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                        } else if (resp.data === 'empty') {
                            this.$message.error('添加失败，请完整填写信息');
                        } else {
                            this.$message.error('未知错误');
                        }
                    })
                }
                this.bookForm = { bookId: null, bookAuthor: "", bookId: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" };
                this.selectAllBookType()
                this.changeOption('changeBookList', null)

            },

            // 批量删除书籍
            deleteBookByIds() {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/book/deleteBookByIds',
                    data: this.MultipleSelection
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectBookByPageAndTerms();
                })
            },

            // 删除书籍
            deleteBookById(bookId) {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/book/deleteBookById?bookId=' + bookId,
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectBookByPageAndTerms();
                })
            },

            // 修改书籍弹窗
            bookRevise(book) {
                this.bookForm = book;
                let index = book.bookLocation.indexOf('排');
                this.bookForm['bookLocationArray'] = [book.bookLocation.substring(0, index - 1), book.bookLocation.substring(index - 1, index + 1), book.bookLocation.substring(index + 1)]
                book.bookState === -11 ? this.bookStateValue = false : true;
                this.reviseBookFormPopUp = true;
            },

            //修改书籍函数
            reviseBook(key) {
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/book/updateBookById?bookStateValue=' + this.bookStateValue,
                        data: this.bookForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '修改完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'failure') {
                            this.$message.error('修改失败');
                        } else {
                            this.$message.error('未知错误');
                        }

                    })
                }
                this.bookForm = { bookId: null, bookAuthor: "", bookId: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" };
                this.reviseBookFormPopUp = false;
                this.selectAllBookType()
                this.selectBookByPageAndTerms()
                this.bookStateValue = true;
            },

            // 查询所有书籍
            selectAllBook() {
                axios({
                    method: "get",
                    url: "http://localhost:9090/BookManage/book/selectAllBook"
                }).then(resp => {
                    this.tableData = resp.data
                })
            },

            // 分页查询所有书籍
            selectBookByPage() {
                axios({
                    method: "get",
                    url: "http://localhost:9090/BookManage/book/selectBookByPage?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
                }).then(resp => {
                    this.tableData = resp.data.rows
                    this.totalData = resp.data.totalCount
                })
            },

            // 分页条件查询
            selectBookByPageAndTerms() {
                axios({
                    method: "post",
                    url: "http://localhost:9090/BookManage/book/selectBookByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.bookForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 查询所有书籍的类型
            selectAllBookType() {
                axios({
                    method: "get",
                    url: "http://localhost:9090/BookManage/book/selectAllBookType"
                }).then(resp => {
                    this.bookTypes = []
                    for (const type in resp.data) {
                        this.bookTypes.push({ value: resp.data[type], label: resp.data[type] })
                    }
                })
            },

            // 提交查询条件
            searchBooks(key) {
                this.currentPage = 1
                if (key === 'cancel') {
                    this.bookForm = { bookId: null, bookAuthor: "", bookId: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" };
                    this.selectBookByPageAndTerms();
                } else if (key === 'determine') {
                    this.selectBookByPageAndTerms();
                    this.bookForm = { bookId: null, bookAuthor: "", bookId: "", bookLocation: "", bookLocationArray: [], bookName: "", bookPublish: "", bookState: "", bookType: "", iSBN: "" };
                }
                this.searchBook = false;
            },

            //借书查询 
            selectBorrowInfoByPageAndBookTerms() {
                axios({
                    method: "post",
                    url: "http://localhost:9090/BookManage/borrowInfo/selectBorrowInfoByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.borrowInfoForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 批量挂失书籍
            lostBooks() {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/borrowInfo/lostBooks',
                    data: this.MultipleSelection
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '挂失完成',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('挂失失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectBorrowInfoByPageAndBookTerms();
                })
            },

            // 挂失书籍
            lostBook(bookId) {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/borrowInfo/lostBook?bookId=' + bookId,
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '挂失完成',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('挂失失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectBorrowInfoByPageAndBookTerms();
                })
            },

            // 查询借书信息
            searchBorrowInfoByBook() {
                this.currentPage = 1
                this.selectBorrowInfoByPageAndBookTerms();
                this.borrowInfoForm = { bookId: null, bookName: "", readerId: "", readerName: "", borrowedTime: "", returnTime: "", arrears: null }
            },

            /**
             * 人员管理
             * */

            // 添加读者
            addReader(key) {
                this.addReaderFormPopUp = false;
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/reader/insertReader?readerStateValue',
                        data: this.readerForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                        } else if (resp.data === 'empty') {
                            this.$message.error('添加失败，请完整填写信息');
                        } else if (resp.data === 'email') {
                            this.$message.error('添加失败，该邮箱已有账号')
                        } else {
                            this.$message.error('添加失败');
                        }
                    })
                }
                this.readerForm = { readerId: null, readerName: '', readerSex: '', readerPhone: '', readerPassword: '', readerArrears: '', readerState: '', readerEmail: '' };
                this.changeOption('changeReaderManageList', null)
            },

            //批量删除读者账号
            deleteReaderByIds() {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/reader/deleteReaderByIds',
                    data: this.MultipleSelection
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else if (resp.data === 'notEmpty') {
                        this.$message.error('删除失败，存在账号未归还全部书籍');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectReaderByPageAndTerms();
                })
            },

            //删除读者账号
            deleteReaderById(readerId) {
                axios({
                    method: 'get',
                    url: 'http://localhost:9090/BookManage/reader/deleteReaderById?readerId=' + readerId,
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else if (resp.data === 'notEmpty') {
                        this.$message.error('删除失败，该账号未归还全部书籍');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectReaderByPageAndTerms();
                })
            },

            // 修改读者弹窗
            readerRevise(reader) {
                this.readerForm = reader;
                reader.readerState === 0 ? this.readerStateValue = false : true;
                this.reviseReaderFormPopUp = true;
            },

            //修改读者函数
            reviseReader(key) {
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/reader/updateReaderById?readerStateValue=' + this.readerStateValue,
                        data: this.readerForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '修改完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'failure') {
                            this.$message.error('修改失败');
                        } else if (resp.data === 'email') {
                            this.$message.error('修改失败，该邮箱已有账号')
                        } else {
                            this.$message.error('未知错误');
                        }

                    })
                }
                this.readerForm = { readerId: null, readerId: '', readerName: '', readerSex: '', readerPhone: '', readerPassword: '', readerArrears: '', readerState: '', readerEmail: '' };
                this.readerStateValue = true;
                this.selectReaderByPageAndTerms()
                this.reviseReaderFormPopUp = false;
            },

            // 提交条件
            searchReaders(key) {
                this.currentPage = 1;
                if (key === 'determine') {
                    this.selectReaderByPageAndTerms();
                    this.readerForm = { readerId: null, readerName: "", readerSex: "", readerPhone: "", readerPassword: "", readerArrears: "", readerState: "", readerEmail: "" }
                    this.searchReader = false;
                } else if (key === 'cancel') {
                    this.readerForm = { readerId: null, readerName: "", readerSex: "", readerPhone: "", readerPassword: "", readerArrears: "", readerState: "", readerEmail: "" }
                    this.searchReader = false;
                    this.selectReaderByPageAndTerms();
                }
                this.searchBook = false
            },

            // 分页条件查询
            selectReaderByPageAndTerms() {
                console.log(1)
                axios({
                    method: "post",
                    url: "http://localhost:9090/BookManage/reader/selectReaderByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.readerForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 批量归还书籍
            returnBooks() {
                let arrears = 0;
                this.MultipleSelection.forEach(borrowInfo => { arrears += Number(borrowInfo.arrears) })
                this.$alert(`需缴纳 ${arrears} 元`, {
                    confirmButtonText: '确定',
                    callback: action => {
                        axios({
                            method: 'post',
                            url: 'http://localhost:9090/BookManage/borrowInfo/returnBooks',
                            data: this.MultipleSelection
                        }).then(resp => {
                            if (resp.data === 'success') {
                                this.$message({
                                    message: '归还完成',
                                    type: 'success'
                                })
                            } else if (resp.data === 'failure') {
                                this.$message.error('归还失败');
                            } else {
                                this.$message.error('未知错误');
                            }
                            this.currentPage = 1;
                            this.selectBorrowInfoByPageAndBookTerms();
                        })
                    }
                });
            },

            // 归还书籍
            returnBook(bookId, arrears) {
                this.$alert(`需缴纳 ${arrears} 元`, {
                    confirmButtonText: '确定',
                    callback: action => {
                        axios({
                            method: 'get',
                            url: 'http://localhost:9090/BookManage/borrowInfo/returnBook?bookId=' + bookId,
                        }).then(resp => {
                            if (resp.data === 'success') {
                                this.$message({
                                    message: '归还完成',
                                    type: 'success'
                                })
                            } else if (resp.data === 'failure') {
                                this.$message.error('归还失败');
                            } else {
                                this.$message.error('未知错误');
                            }
                            this.currentPage = 1;
                            this.selectBorrowInfoByPageAndBookTerms();
                        })
                    }
                });
            },


            /**
             * 管理员管理
             */
            // 是否禁用修改按钮
            isDisabled(adminName) {
                return this.loginUser === 'admin' || this.loginUser === adminName;
            },

            // 分布条件查询
            selectAdminByPageAndTerms() {
                axios({
                    method: 'post',
                    url: "http://localhost:9090/BookManage/admin/selectAdminByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.adminForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 添加管理
            addAdmin(key) {
                this.addAdminFormPopUp = false;
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/admin/insertAdmin',
                        data: this.adminForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            })
                        } else if (resp.data === 'empty') {
                            this.$message.error('注册失败，请完整填写信息');
                        } else if (resp.data === 'email') {
                            this.$message.error('注册失败，该邮箱已有账号');
                        } else {
                            this.$message.error('注册失败');
                        }
                    })
                }
                this.adminForm = { adminId: null, adminName: "", adminPhone: "", adminPassword: "", adminState: "", adminEmail: "" };
                this.changeOption('changeAdministratorList', null)
            },

            // 批量删除管理
            deleteAdminByIds() {
                axios({
                    method: 'post',
                    url: "http://localhost:9090/BookManage/admin/deleteAdminByAdminIds",
                    data: this.MultipleSelection
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectAdminByPageAndTerms();
                })
            },

            // 删除管理
            deleteAdminById(adminId) {
                axios({
                    method: 'get',
                    url: "http://localhost:9090/BookManage/admin/deleteAdminByAdminId?adminId=" + adminId,
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectAdminByPageAndTerms();
                })
            },

            // 修改管理弹窗
            adminRevise(admin) {
                this.adminForm = admin;
                admin.adminState === 0 ? this.adminStateValue = false : true;
                this.reviseAdminFormPopUp = true;
            },

            // 修改管理
            reviseAdmin(key) {
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/admin/updateAdminByAdminId?adminStateValue=' + this.adminStateValue,
                        data: this.adminForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '修改完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'failure') {
                            this.$message.error('修改失败');
                        } else if (resp.data === 'email') {
                            this.$message.error('修改失败，该邮箱已有账号')
                        } else {
                            this.$message.error('未知错误');
                        }

                    })
                }
                this.adminForm = { adminId: null, adminName: "", adminPhone: "", adminPassword: "", adminState: "", adminEmail: "" };
                this.adminStateValue = true;
                this.selectAdminByPageAndTerms()
                this.reviseAdminFormPopUp = false;
            },


            /**
             * 信息管理
             * */
            // 添加公告
            addAnnouncement(key) {
                this.announcementForm.announcementContent = this.announcementForm.announcementContent.replace(/\n/g, "<br/>");
                this.announcementForm.announcementContent = this.announcementForm.announcementContent.replace(/\s/g, "&nbsp;");
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/announcement/insertAnnouncement',
                        data: this.announcementForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '添加完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'empty') {
                            this.$message.error('添加失败，请完整填写信息');
                        } else {
                            this.$message.error('添加失败');
                        }
                    })
                }
                this.announcementForm = { announcementTitle: "", announcementContent: "" };
                this.changeOption('changeAnnouncementList', null)
            },
            // 公告查询
            selectAnnouncementByPageAndTerms() {
                axios({
                    method: 'post',
                    url: "http://localhost:9090/BookManage/announcement/selectAnnouncementByPageAndTerms?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.announcementForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 修改公告弹窗
            announcementRevise(announcement) {
                this.announcementForm = announcement;
                this.reviseAnnouncementFormPopUp = true;
            },

            // 修改公告
            reviseAnnouncement(key) {
                if (key === 'determine') {
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/announcement/updateAnnouncementByAnnouncementId',
                        data: this.announcementForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '修改完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'failure') {
                            this.$message.error('修改失败');
                        } else {
                            this.$message.error('未知错误');
                        }
                    })
                }
                this.announcementForm = { announcementTitle: "", announcementContent: "" };
                this.selectAnnouncementByPageAndTerms()
                this.reviseAnnouncementFormPopUp = false;
            },

            //批量删除公告
            deleteAnnouncementByAnnouncementIds() {
                axios({
                    method: 'post',
                    url: "http://localhost:9090/BookManage/announcement/deleteAnnouncementByAnnouncementIds",
                    data: this.MultipleSelection
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectAnnouncementByPageAndTerms();
                })
            },

            // 删除公告
            deleteAnnouncementByAnnouncementId(announcementId) {
                axios({
                    method: 'get',
                    url: "http://localhost:9090/BookManage/announcement/deleteAnnouncementByAnnouncementId?announcementId=" + announcementId,
                }).then(resp => {
                    if (resp.data === 'success') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    } else if (resp.data === 'failure') {
                        this.$message.error('删除失败');
                    } else {
                        this.$message.error('未知错误');
                    }
                    this.currentPage = 1;
                    this.selectAnnouncementByPageAndTerms();
                })
            },

            // 消息查询
            selectMessageByPageANdTerms() {
                axios({
                    method: 'post',
                    url: 'http://localhost:9090/BookManage/message/selectMessageByPageAndTerms?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize,
                    data: this.messageForm
                }).then(resp => {
                    this.tableLoading = true;
                    setTimeout(() => {
                        this.tableData = resp.data.rows;
                        this.totalData = resp.data.totalCount;
                        this.tableLoading = false;
                    }, 1000);
                })
            },

            // 搜索条件
            searchMessageByMessageId() {
                this.currentPage = 1;
                this.selectMessageByPageANdTerms();
                this.messageForm = { messageId: null, readerId: null, messageTitle: "", messageContent: "", messageState: null, readerName: "" }
            },

            messageReturn(message) {
                this.messageForm = message;
                this.returnMessageFormPopUp = true;
            },

            returnMessage(key) {
                if (key === 'determine') {
                    this.messageReturnState = 0;
                    axios({
                        method: 'post',
                        url: 'http://localhost:9090/BookManage/message/updateMessageByMessageId',
                        data: this.messageForm
                    }).then(resp => {
                        if (resp.data === 'success') {
                            this.$message({
                                message: '回复完成',
                                type: 'success'
                            })
                        } else if (resp.data === 'failure') {
                            this.$message.error('回复失败');
                        } else {
                            this.$message.error('未知错误');
                        }
                    })
                }
                this.messageForm = { messageId: null, readerId: null, messageTitle: "", messageContent: "", messageState: null, readerName: "", messageReturn: "", messageReturnState: null }
                this.selectMessageByPageANdTerms()
                this.returnMessageFormPopUp = false;
            }
        },

        data() {
            // 所有变量（包括类）都写在下面的return里面
            return {
                loginUser: '',
                // 导航栏高亮 key
                changeActive: 'changeBookList',
                // 书籍表格类的列表
                tableData: [],
                // 当前页码
                currentPage: 1,
                // 每页显示的条数
                pageSize: 10,
                // 总条数
                totalData: 200,
                /**
                 * 书籍列表
                 * */
                // 控制书籍是否启用滑块
                bookStateValue: true,
                // 添加书籍弹窗的控制变量
                addBookFormPopUp: false,
                // 修改书籍弹窗的控制变量
                reviseBookFormPopUp: false,
                // 搜索书籍弹窗控制变量
                searchBook: false,
                // 书籍类型的选项
                bookTypes: [],
                // 导航选项的 id
                navigations: ["changeBookList", "changeBorrowInfoList", "changeReaderManageList",
                    "changeBorrowInfoByReaderList", "changeAdministratorList", "changeInsertAnnouncement", "changeAnnouncementList", "changeMessageList"],
                // 多选的列表
                MultipleSelection: [],
                // 书籍表单类
                bookForm: {
                    bookId: null,
                    bookAuthor: "",
                    bookLocation: "",
                    bookLocationArray: [],
                    bookName: "",
                    bookPublish: "",
                    bookState: "",
                    bookType: "",
                    iSBN: ""
                },
                // 书籍位置列表类
                bookLocations: [{
                    value: '第一借阅厅',
                    label: '第一借阅厅',
                    children: [{
                        value: 'A排',
                        label: 'A排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'B排',
                        label: 'B排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'C排',
                        label: 'C排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'D排',
                        label: 'D排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'E排',
                        label: 'E排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'F排',
                        label: 'F排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'G排',
                        label: 'G排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'H排',
                        label: 'H排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'I排',
                        label: 'I排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'J排',
                        label: 'J排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'K排',
                        label: 'K排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'L排',
                        label: 'L排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'M排',
                        label: 'M排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'N排',
                        label: 'N排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'O排',
                        label: 'O排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'P排',
                        label: 'P排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Q排',
                        label: 'Q排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'R排',
                        label: 'R排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'S排',
                        label: 'S排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'T排',
                        label: 'T排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'U排',
                        label: 'U排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'V排',
                        label: 'V排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'W排',
                        label: 'W排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'X排',
                        label: 'X排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Y排',
                        label: 'Y排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Z排',
                        label: 'Z排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }]
                }, {
                    value: '第二借阅厅',
                    label: '第二借阅厅',
                    children: [{
                        value: 'A排',
                        label: 'A排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'B排',
                        label: 'B排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'C排',
                        label: 'C排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'D排',
                        label: 'D排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'E排',
                        label: 'E排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'F排',
                        label: 'F排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'G排',
                        label: 'G排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'H排',
                        label: 'H排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'I排',
                        label: 'I排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'J排',
                        label: 'J排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'K排',
                        label: 'K排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'L排',
                        label: 'L排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'M排',
                        label: 'M排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'N排',
                        label: 'N排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'O排',
                        label: 'O排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'P排',
                        label: 'P排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Q排',
                        label: 'Q排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'R排',
                        label: 'R排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'S排',
                        label: 'S排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'T排',
                        label: 'T排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'U排',
                        label: 'U排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'V排',
                        label: 'V排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'W排',
                        label: 'W排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'X排',
                        label: 'X排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Y排',
                        label: 'Y排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }, {
                        value: 'Z排',
                        label: 'Z排',
                        children: [{
                            value: '一层',
                            label: '一层',
                        }, {
                            value: '二层',
                            label: '二层',
                        }, {
                            value: '三层',
                            label: '三层',
                        }]
                    }]
                }],
                // 表格遮罩层控制变量
                tableLoading: true,
                /**
                 * 借书查询（书籍）
                */
                borrowInfoForm: {
                    bookId: null,
                    bookName: "",
                    readerId: "",
                    readerName: "",
                    borrowedTime: "",
                    returnTime: "",
                    arrears: null
                },


                /**
                 * 添加读者
                 * */
                // 添加读者弹窗控制变量
                addReaderFormPopUp: false,
                // 读者表单
                readerForm: {
                    readerId: null,
                    readerName: "",
                    readerSex: "",
                    readerPhone: "",
                    readerPassword: "",
                    readerArrears: "",
                    readerState: "",
                    readerEmail: ""
                },
                // 控制读者账号是否启用变量
                readerStateValue: true,
                // 搜索读者条件弹窗
                searchReader: false,
                // 修改读者信息弹窗
                reviseReaderFormPopUp: false,


                /**
                 * 管理员管理
                 */
                // 控制管理员账号是否启用变量
                adminStateValue: true,
                // 管理员表单
                adminForm: {
                    adminId: null,
                    adminName: "",
                    adminPhone: "",
                    adminPassword: "",
                    adminState: "",
                    adminEmail: ""
                },
                // 添加管理弹窗控制变量
                addAdminFormPopUp: false,
                // 搜索管理条件弹窗
                searchAdmin: false,
                // 修改管理信息弹窗
                reviseAdminFormPopUp: false,


                /**
                 * 信息管理
                 */
                // 公告表单
                announcementForm: {
                    announcementId: null,
                    announcementTitle: "",
                    announcementContent: ""
                },

                // 修改公告弹窗控制变量
                reviseAnnouncementFormPopUp: false,

                // 消息表单
                messageForm: {
                    messageId: null,
                    readerId: null,
                    messageTitle: "",
                    messageContent: "",
                    messageState: null,
                    readerName: "",
                    messageReturn: "",
                    messageReturnState: null
                },

                // 回复消息弹窗控制变量
                returnMessageFormPopUp: false,
            }
        }
    })
</script>

</html>